import { useEffect, useRef } from 'react'
import THREEProject from '../utils/index'
import {arrNomarlize} from '../utils/helper'
import myWorker from '../utils/worker'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'


const worker = myWorker
const BufferGeometryII = () => {
  // console.log('myWorker===============================>', myWorker)
  const can = useRef(null)
  const pro = new THREEProject([1, 0, 1])
  const { thr, renderer, scene, axes, camera, controls } = pro
  const fileLoader = new thr.FileLoader()
  let model = null
  const init = () => {
    const geometry = new thr.BufferGeometry()
    const material = new thr.MeshBasicMaterial({
      side: thr.DoubleSide,
      vertexColors: true,
    })
    const planeMaterial = new thr.MeshBasicMaterial({
      color: 0x00ffff,
      transparent: true,
      opacity: 0.5,
      side: thr.DoubleSide
    })
    scene.add(axes)
    const filePath = '/assets/fbx_view.fbx'
    console.time()
    const fbxLoader = new FBXLoader()
    fbxLoader.load(filePath, group => {
      console.log('group', group)
      scene.add(group)
    })
    scene.add(new thr.AmbientLight(0xffffff))
    appendRenderDom()
    animate()
  }


  const appendRenderDom = () => {
    if(!can.current.children.length) {
      can.current.appendChild(renderer.domElement)
    }
  }
  let count = 0
  const render = () => {
    controls.update()
    
    
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    render()
  }

  useEffect(init, [])

  return (
    <div ref={can}></div>
  )
}

export default BufferGeometryII
export {
  BufferGeometryII
}